<script setup>
import { ref, onMounted } from 'vue'
import $ from 'jquery/dist/jquery'
import { useTestStore } from '@/stores/test.js'
import axios from 'axios';
import { ElMessage } from 'element-plus'
import jwt_decode from "jwt-decode";

const store = useTestStore()
const payType = ref('全部账单')
const isTypeShow = ref(false)
const isTimeShow = ref(false)
const year = ref('')
const month = ref('')
const datas = ref('')


const open = (msg) => {
    ElMessage(msg)
}
let token = jwt_decode(localStorage.getItem("token"))
if (token == null) {
    token = jwt_decode(localStorage.getItem("longToken"))
}

onMounted(() => {
    let time = new Date();
    year.value = time.getFullYear();
    month.value = time.getMonth() + 1;
    store.yearSelected = time.getFullYear();
    store.monthSelected = time.getMonth() + 1;

    $('.month-li').css("marginTop", -(month.value - 3) * 40 + "px")

    $('.type-select>div>div').click(function () {
        $(this).css({ color: "#04af29", backgroundColor: "#04af2936", border: " 1px solid #02831e" }).siblings().css({ color: "#000000", backgroundColor: "#dddddd", border: " 1px solid transparent" })
        payType.value = $(this).html()
    })

    axios.get("http://192.168.110.221:8080/history/queryByMonthController", {
        params: {
            token:localStorage.getItem('token'),
            longToken:localStorage.getItem('longToken'),
            userNumber:token.userNumber,
            year: store.yearSelected,
            month: store.monthSelected,
        }
    })
        .then((resp) => {
            if (resp.data.code == 200) {
                datas.value = resp.data.datas
            } else {
                datas.value = ''
                open(resp.data.msg)
            }
        })
        .catch((e) => {
            console.log(e);
        })

})
function typeShow() {
    isTypeShow.value = true;
    var body = document.getElementsByTagName("body")[0];
    body.style.overflow = "hidden";
}
function timeShow() {
    isTimeShow.value = true;
    var body = document.getElementsByTagName("body")[0];
    body.style.overflow = "hidden";
}
function noShow() {
    isTypeShow.value = false;
    isTimeShow.value = false;
    var body = document.getElementsByTagName("body")[0];
    body.style.overflow = null;
}
//类型确定
function typeFix() {
    let url = "";
    switch (payType.value) {
        case '全部账单':
            url = "http://192.168.110.221:8080/history/queryAllController"
            break;
        case '支付':
        case '充值':
        case '提现':
        case '转账':
        case '收钱':
            url = "http://192.168.110.221:8080/history/queryByTypeController"
            break;
    }

    axios.get(url, {
        params: {
            token:localStorage.getItem('token'),
            longToken:localStorage.getItem('longToken'),
            userNumber:token.userNumber,
            operationType: payType.value
        }
    })
        .then((resp) => {
            if (resp.data.code == 200) {
                datas.value = resp.data.datas
            } else {
                datas.value = ''
            }
        })
        .catch((e) => {
            alert('404')
        })

    noShow();
}
//时间确定
function timeFix() {
    axios.get("http://192.168.110.221:8080/history/queryByMonthController", {
        params: {
            token:localStorage.getItem('token'),
            longToken:localStorage.getItem('longToken'),
            userNumber:token.userNumber,
            year: store.yearSelected,
            month: store.monthSelected,
        }
    })
        .then((resp) => {
            if (resp.data.code == 200) {
                datas.value = resp.data.datas
            } else {
                datas.value = ''
            }
        })
        .catch((e) => {
            console.log(e);
        })
    noShow();
}
// 年份点击事件
function yy(num) {
    $(".year-li").css("margin-top", num * 40 - 80 + "px");
    store.yearSelected = year.value - num;
}
// 月份点击事件
function mm(num) {
    $(".month-li").css("margin-top", -(num - 3) * 40 + "px");
    store.monthSelected = num;
}

defineOptions({
    inheritAttrs: false
})
</script>

<template>
    <div class="container">
    <div class="box">
        <div class="header">
            <div class="records-type" @click="typeShow">{{ payType }}<span class="iconfont i-1 icon-xiajiantou"></span></div>
        </div>
        <div class="header">
            <div class="records-time" @click="timeShow">{{ store.yearSelected }}年{{ store.monthSelected }}月<span
                    class="iconfont i-2 icon-xiajiantou"></span></div>
        </div>


        <!-- 遮罩层 -->
        <div class="back-cover" v-if="isTypeShow || isTimeShow" @click="noShow"></div>

        <!-- 账单类型 -->
        <div class="type-select" v-show="isTypeShow">
            <h2>选项筛选项</h2>
            <p>收支类型</p>
            <div>
                <div>全部</div>
                <!-- <div>支出</div>
                    <div>收入</div> -->
            </div>
            <p>交易类型</p>
            <div id="aaaa">
                <div>全部账单</div>
                <div>支付</div>
                <div>充值</div>
                <div>提现</div>
                <div>转账</div>
                <div>收钱</div>
            </div>
            <div class="select-btn">
                <button @click="noShow">取消</button>
                <button @click="typeFix">确定</button>
            </div>
        </div>

        <!-- 时间选择 -->
        <div class="time-select" v-show="isTimeShow">
            <div>
                <div class="year-select">
                    <div class="year-li">
                        <li @click="yy(4)">{{ year - 4 }}年</li>
                        <li @click="yy(3)">{{ year - 3 }}年</li>
                        <li @click="yy(2)">{{ year - 2 }}年</li>
                        <li @click="yy(1)">{{ year - 1 }}年</li>
                        <li @click="yy(0)">{{ year - 0 }}年</li>
                    </div>

                </div>

                <div class="month-select">
                    <div class="month-li" v-if="store.yearSelected == year">
                        <li v-for="m in month" @click="mm(m)">{{ m }}月</li>
                    </div>
                    <div class="month-li" :style="{ marginTop: -(12 - 3) * 40 + 'px' }" v-else>
                        <li v-for="m in 12" @click="mm(m)">{{ m }}月</li>
                    </div>
                </div>

            </div>

            <div class="between-line"></div>
            <!-- 按钮 -->
            <div class="select-btn">
                <button @click="noShow">取消</button>
                <button @click="timeFix">确定</button>
            </div>
        </div>

        <!-- 账单展示 -->
        <div class="show">
            <li v-for="d in datas">
                <p>类型:<span>{{ d.operationType }}</span></p>
                <p>支付:<span>{{ d.payOut }}</span></p>
                <p>收款:<span>{{ d.payIn }}</span></p>
                <p>金额:<span>{{ d.amount }}</span></p>
                <p>时间:<span>{{ d.operationTime }}</span></p>
            </li>
            <li v-if="datas == ''">
                暂无数据
            </li>
        </div>
    </div>
</div>
</template>

<style scoped>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.container{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.iconfont {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
}

.i-1 {
    font-size: 10px !important;
}

.i-2 {
    font-size: 12px;
}

.box {
    z-index: -100;
    padding: 0 0 10px;
    background-color: #fff;
}

.header {
    width: 100%;
    padding: 10px 0;
    background-color: #fff;
    border-bottom: 1px solid lightgray;
}

.header::after {
    display: block;
    content: '';
    clear: both;
}

.records-type {
    margin-left: 10px;
    width: 80px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    background-color: lightgray;
    font-size: 12px;
    border-radius: 12px;
}

.records-time {
    float: left;
    margin-left: 10px;
}

.records-sum {
    float: right;
    margin-right: 10px;
    font-size: 12px;
    margin-top: 2px;
    color: #868788;
}


.type-select,
.time-select {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #fff;
    width: 100%;
    z-index: 9999;
    border-radius: 15px 15px 0 0;
}

.type-select h2 {
    font-size: 14px;
    padding: 15px 0 10px 3.5%;
}

.type-select p {
    font-size: 13px;
    color: #868788;
    padding: 10px 0 10px 3.5%;

}

.type-select>div::after {
    display: block;
    content: '';
    clear: both;
}

.type-select>div>div {
    text-align: center;
    float: left;
    width: 28%;
    margin: 10px 0 10px 3.5%;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    background-color: #dddddd;
    border: 1px solid transparent;
    border-radius: 5px;
}

.type-select>div:nth-of-type(2) {
    margin-bottom: 40px;
}

.select-btn button {
    margin-bottom: 20px;
    width: 30%;
    height: 35px;
    line-height: 35px;
    font-size: 16px;
    border: 1px solid transparent;
    font-weight: 500;
    border-radius: 5px;
}

.select-btn button:first-child {
    margin-left: 18%;
    margin-right: 4%;
    background-color: #dddddd;
}

.select-btn button:last-child {
    background-color: #04af29;
    color: #fff;
}

.time-select>div {
    width: 100%;
    margin-top: 20px;
}

.time-select>div::after {
    display: block;
    content: '';
    clear: both;
}


.year-select {
    width: 20%;
    float: left;
    margin-left: 20%;
    /* border: 1px solid black; */
    text-align: center;
    height: 210px;
    overflow: hidden;
}

.year-select li,
.month-li li {
    width: 100%;
    height: 30px;
    line-height: 30px;
    padding: 5px 0;
    font-size: 18px;
}

.year-li {
    transition: all .3s;
    margin-top: -80px;
}

.month-li {
    transition: all .3s;
    /* margin-top: -360px; */
}




.month-select {
    width: 20%;
    float: right;
    margin-right: 20%;
    /* border: 1px solid black; */
    text-align: center;
    height: 210px;
    overflow: hidden;
}

.between-line {
    width: 80%;
    height: 40px;
    position: absolute;
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    top: 80px;
    left: 0;
}





.back-cover {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    z-index: 1000;
}


.type-select>div>div:first-child {
    color: #04af29;
    background-color: #04af2936;
    border: 1px solid #02831e;
}






.show li {
    width: 94%;
    margin: 15px auto;
    border-radius: 5px;
    padding: 3px 5px;
    background-color: #F0AB4E;
    color: #fff;
}

.show li p {
    padding: 2px 0;
}

.show li p span {
    margin-left: 10px;
}</style>